Twitter Bootstrap Question posted in

Twitter bootstrap – Pure CSS navbar :Hover on List not staying

I’m sure this is a common problem with pure css navbar. I have a navbar created with ul and li’s but I can’t get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I’m hovering over the link but I’m not sure how to get it work. I tried jQuery mouseover but it wasn’t working for me:

@font-face{
	font-family: Bebas;
	src:url(BEBAS.TTF);
}
body{
	
	margin:0 auto;
	height:500px;
    font-family: Bebas;

}
.header{
	top:0;
	position:absolute;
	left:0;
	right:0;
	background:#ff6200;
	height:50px;
	width:100%;
	color:white;
	font-family: Bebas;

}
.header .call{
	
		line-height:50px;
}
.call{
	width:60%;
	margin:0 auto;
}
.login{
	float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
	margin-left:10px;
}
.number{
	margin-left:10px;
}
.navbar{
	margin-top:50px;
	right:0;
	left:0;
	position:relative;
	height:130px;
	width:100%;
	background:#F7F7F7;
	border-radius:0px;
	padding:0px;
}
.inside-navbar{
	line-height:130px;
	width:60%;
	margin:0 auto;
	font-size:40px;

}
.logo{
	color:#FF6200;
}

#navsman{
	font-size:16px;
	float:right;
	display:inline-block;
	min-width:300px;
	position:absolute;
	    padding-right: 20%;
}


#navsman  li{
	display:inline;
	position:relative;
	padding-left:15px;
	line-height:1.4;
}
#navsman li ul{
	position:absolute;
	display:none;
}

#navsman li:hover > ul.firstmenu{
	display:block !important;
	margin-top: -50px;
}

 #navsman li ul li{
	position:relative;
	padding-left:15px;
}
#navsman ul.secondmenu{
	    margin-left: 40px;
	    padding-top:15px;
	padding-top: 30px;
    z-index: 2;
    width: 120px;
    display:none;
}
#navsman > li:hover > ul {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
	display:block !important;
	margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
         <div class="header">
             <div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
                <span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span> 
            </div>
                 
            
         </div>
        <div class="navbar">
            <div class="inside-navbar">
            <span>YOUR<span class="logo">LOGO</span></span>

<ul id="navsman">
            <li><a href="">Title1</a></li>
            <li class="title2"><a href="">Title2</a>
    <ul class="firstmenu">
        <li><a href="#">SUBMENU1</a></li>
        <li><a href="#">SUBMENU2</a></li>
        <li><a href="#">SUBMENU3</a>
    <ul class="secondmenu">
        <li class="secondli-first"><a href="#">Sub link 1</a></li>
        <li class="secondli-second"><a href="#">Sub link 1</a></li>
    </ul>
          </li>
    </ul>



         
            <li><a href="">Title3</a></li>
            <li><a href="">Title4</a></li>
            <li><a href="">Title5</a></li>
            <li><a href="">Title6</a></li>
            <li><a href="">Title7</a></li>
            </div>
        </ul>
        </div>
</div><!--Navbar end-->
</div>
Tags:

2

Answers


  1. 0

    Replace:

    #navsman > li:hover > ul {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
}

    With:

    #navsman > li:hover > ul li {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
  height: 10px;
  margin-top:-15px;
  padding-left: 10px;
}
    Login or Signup to reply.
  2. 0

    Close the gap mentioned by @James Montagne

    navsman li ul{

    position:absolute;
display:none;
top:70px; <-- new line of code
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search