Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this:</p> <pre><code>.dropdown-submenu &gt; .dropdown-menu { display:none; } .dropdown-submenu:hover &gt; .dropdown-menu { display:block; } </code></pre> <p>See <a href="http://jsfiddle.net/SD8JL/3/" rel="nofollow">JSFiddle</a></p> <p><strong>Edit</strong> If you want it to be aligned properly, also add this:</p> <pre><code>.dropdown-submenu &gt; .dropdown-menu { display:none; margin:9px 0 0 -13px; } </code></pre> <p><strong>Edit 2</strong> The margin was 1 pixel out so that it broke the hovering events.</p> <p><strong>Edit 3</strong></p> <p>To have your submenu to the right of your original menu, use the following CSS (see <a href="http://jsfiddle.net/SD8JL/4/" rel="nofollow">here</a>):</p> <pre><code>.navigation{ margin:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;box-shadow: 0 0 14px 0px #e5e1e1; height:45px; background: url(../images/backgrounds/menubg.png) repeat-x; border: 1px solid #e5e1e1;} nav { position: relative; font-size:13px; margin: 0px auto; width: 100%;} nav ul {list-style-type: none; padding:0; margin:0;} nav ul li {float: left; position: relative;border-right:1px solid #e9e9e9; width:20% } nav ul li.last {border-right:0;} nav ul li a {text-align: center;display:block;text-decoration:none;padding: 12px 0;color:#2d2d2d;} nav ul li a:hover { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;} nav ul li.active a { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;} nav ul li ul {display: none} nav ul li:hover ul {display: block;position: absolute;list-style-type: none;margin:0;padding:0;z-index:999; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 3px 0; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #c12727; border-right-color: #dfdfdf; border-bottom-color: #dfdfdf; border-left-color: #dfdfdf;} nav ul li:hover ul li { padding:8px 13px; border-top: 1px solid #efefef; float: none; background: none; width:160px; border-right:0;} nav ul li:hover ul li span{ padding:0; margin:0; font-size:11px; color:#ccc;} nav ul li:hover ul li:first-child { border-top: none; } nav ul li:hover ul li a {color:#2d2d2d; font-size:12px; padding:0; text-align: left; background:transparent;} nav ul li:hover ul li a:hover {color:#c12727; background:transparent;} nav ul li.last:hover ul li {border-right:0;width: 95px;} nav .dropdown {display: none;} .dropdown-submenu &gt; .dropdown-menu { display:none; margin:-40px 0 0 173px; } .dropdown-submenu:hover &gt; .dropdown-menu { display:block; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload