Question

Normal State:

Hover State:

Guys, this is maybe petty but I couldn’t find the source of this ‘pettiness’. As you can see from the image link, I tried to create a dropdown menu there. Sadly, evertime I hover the trigger to the dropdown menu, instead of dropping down, the menu is displaying itself horizontally and getting integrated with the main menu.

this is my simplified html (I only utilize home, about, and benchmark. drop-down trigger on about)

<div class="header">
    <div id="navbar">
         <ul id="nav" >
         <li class="rhombus"><a class="Home"        href="#"><span><p>Home</p></span></a></li>
         <li class="rhombus"><a class="About"   href="#"><span><p>About</p></span></a>
             <ul>
             <li><a class="History" href="#"><span><p>History</p></span></a></li>
             <li><a class="Board"   href="#"><span><p>Board</p></span></a></li>
             <li><a class="Vision"  href="#"><span><p>Vision &amp; Mission</p></span></a></li>
             </ul>
         </li>
        <li class="rhombus"><a class="Benchmark"                    href="#"><span><p>Benchmark &amp; Market</p></span></a></li>
         </ul>
 </div></div>

and this is the simplified CSS

/* centering container */
.outerwrap {width:100%; height:100%; margin:0px; padding:0px; display:table; position:absolute; top:0px; left:0px;}
.innerwrap {margin:0px; padding:0px; display:table-cell; vertical-align:middle;}

/* header */
.header {height:27.82738095238095%; width:100%; position:absolute; top:0%; left:0%; z-index:100;}

/* navigation bar */
#navbar {position:relative; top:60.2%; left:5%; z-index:100;}

#nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;}   

#nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background:yellow}

#nav a:hover{background:red;}

#nav li ul {position:relative; display:none;}

#nav li ul li a:link, #nav li ul li a:visited {height:31px; background:green;}

#nav li ul li a:hover {background:blue}

.History{width:50px;float:left;}
.Board{width:50px;float:left;}
.Vision{width:50px;float:left;}

li.rhombus
{
    position: relative;
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    width:96.1%;
}

a.Home      {width:50px;float:left;}
a.About     {width:50px;float:left;}
a.Benchmark         {width:50px;float:left;}

li.rhombus span 
{
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    display:block;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}

.test{} 

Is it because I use “float:left” as one of properties of my <a></a> in my dropdown menu? If I remove that property, this what will happen:

and there’s something strange about my dropdown.. it needs an {CSS block} in the css, whether I attach it with class, ids, or with nothing at all such as:

.unusedclass{CSS}
.unusedid{CSS}
{}

if I don’t provide one of those, then the ‘dropdown’ won’t move and instead showing the hover state. (image 2).

here is the simplifed fiddle: fiddle

please help

Answer 1

Dont create a class for each submenu. Here is a similar post that will get the results you want. You can then style each block to skew, colors etc.