CODEWITHSUNDEEP
htmlcssmenu
graxia
graxia

Reputation: 271

hover submenu don't align exactly on the menu pointed by my cursor

i'm trying to make a hover menu but the menu shows not exactly on the menu i've selected. it aligns on the left side of my navigation bar. i tried changing the positions but nothing happened. here's my code. what did i missed? i'm just a beginner thanks in advance

HTML 

<nav> 
             <ul> <li><a href="index.php">      Home</a></li> 
                  <li><a href="#">              About us</a>
                            <ul>
                                <li> <a href=""> Company Profile        </a> </li>
                                <li> <a href=""> Management             </a> </li>
                                <li> <a href=""> Testimonials           </a> </li>
                                <li> <a href=""> Services               </a> </li>
                            </ul>
                    </li> 

                    <li><a href="googlemap.php">Contacts</a></li> 
                    <li><a href="careers.php">Career</a></li> 
                    <li><a href="#">Blog</a>

                    </li> 

                    <li><a href="login.php">Log in</a></li> 
                </ul> 
                <div class="handle"> Menu </div>

        </nav>

CSS

nav {
width:100%;
margin:0;
overflow: hidden;
}



nav ul {
list-style: none;
overflow: hidden;   

-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav li a {
background:rgba(0,0,0,8);
border-right: 1px solid gray;
color:white;
display: block;
float: left;
font:16px, Arial, Helvetica;
padding: 12px;
text-align: center;
text-decoration: none;
width: 14.8%; 
}

 nav li a:hover, nav li.active a{
background:rgb(64,64,64);

}



.handle {
width:100%
background: black;
text-align: left;
box-sizing: border-box;
padding:15px 10px;
cursor: pointer;
color: white;
display: none;



 }
@media only screen  and (max-width:580px){
nav ul { max-height: 0; }
.showing { max-height: 20em; }
nav li a {
    box-sizing: border-box;
    width: 100%;
    font: 13px Arial,Helvetica;
    padding-top: 12px;
    padding-bottom: 12px;
    border:-bottom:1px solid gray ;
    text-align: left;


 }

 .handle{
    display: block;
    background-color: rgba(0,0,0,0.8);
    }
}


nav li ul {
display: none; 
width: 10em; /* Width to help Opera out */
background-color: #69f;
}
nav li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; 
}

nav li:hover li {
float: left; 
}

nav li:hover li a {
background-color: gray;
border-bottom: 1px solid #fff;
color: white; 
width: 100px;


}

nav li li a:hover {
background-color: #8db3ff; 
 }

Upvotes: 0

Views: 50

Answers (1)

Nutshell
Nutshell

Reputation: 8537

I've changed this : 

nav li {float: left; }
nav li a {
background:rgba(0,0,0,8);
border-right: 1px solid gray;
color:white;
display: block;
font:16px, Arial, Helvetica;
padding: 12px;
text-align: center;
text-decoration: none;
}

The problem was you have to put a width on "li" elements because you have an "overflow: hidden;" on "ul" element.

See this working fiddle https://jsfiddle.net/11zm8qv2/

Upvotes: 1

Related Questions