(2014-03-30, 04:15 PM)Leefish Wrote: [ -> ]The code is of course a complete "page" that you can run launch in your browser. obviously you cant drop that straight in your css file.
The key to it is that the unordered list is contained in a div called navigation and the css has no further classes on the ul/li elements. Is the unordered list in your screenshot in a div called navigation with no further classes?
yes it is just
<div id="navigation">
<ul>
<li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
<li><a href="#">User Menu</a>
<ul><li>{$welcomeblock}</li></ul></li>
</div>
So for the dropdown do i have to create another set of CSS code? All i want is a simple dropdown menu that works. This one works its just not vertically dropped like i want....
The code below wll work:
<div class="navigation">
<ul>
<li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
<li><a href="#">User Menu</a>
<ul><li>{$welcomeblock}</li></ul></li>
</div>
See that navigation is a CLASS not an id in my html. If you add the css below into your global.css (its not a lot of css) it will work. You can fix colors later.
/*menu*/
.navigation ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.navigation ul a {
color:white;
}
.navigation ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: red;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.navigation ul li:hover {
background: #555;
color: #fff;
}
.navigation ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.navigation ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.navigation ul li ul li:hover { background: #666; }
.navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
(2014-03-30, 05:30 PM)Leefish Wrote: [ -> ]The code below wll work:
<div class="navigation">
<ul>
<li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
<li><a href="#">User Menu</a>
<ul><li>{$welcomeblock}</li></ul></li>
</div>
See that navigation is a CLASS not an id in my html. If you add the css below into your global.css (its not a lot of css) it will work. You can fix colors later.
/*menu*/
.navigation ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.navigation ul a {
color:white;
}
.navigation ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: red;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.navigation ul li:hover {
background: #555;
color: #fff;
}
.navigation ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.navigation ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.navigation ul li ul li:hover { background: #666; }
.navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Thank you very much
Works great.
Now i just need to modify that CSS a bit to make it look proper and colored proper and then I'll be good