Hi guys. I recently upgraded Suffusion 4.4.6 and it messed up my old style sheet. Can someone show me the option for dropdown menubar new style sheet? Any help would be much appreciated. Thanks in advance.
I need dropdown menubar new style sheet
There is an easy way to create a drop down menus using XHTML and CSS only in all modern browsers. You don’t need any advance javascript or even flash to create this menu. Just follow and download the following instruction and files here.
-
Create an XHTML uses the following codes (you can also see the attached file XHTML).
|
|
<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>
|
With this XHTML, the main list and subnavigation elements will be working correctly and properly. The navigation bar can be also work without those submenus, you just need to mix and match as it needs.
-
Next, we will not create styles to our navigation or menu bar ( you can also download the STYLE file).
|
|
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
|
In this CSS style, I place the individual items to the left and added some styling to the anchors to make the navigation bar look good. The rule that put for the navbar ID which is “height:1em;” force the navigation bar to have a specific height and width. As long as the height is specified, the list will retain its block-level position.
-
Create some style on the submenu section
|
|
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
|
This style will create and display of what will be the look for the submenus of the listed items in the navigation. You can adjust the background-color or also can specify what font, size , and color on the submenus items.
-
Create a style for the hover
|
|
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
|
In this style, it will show on how the submenu will show when the mouse will hover on the selected item. You can change the background-color, font color and even adjust the border.
I need dropdown menubar new style sheet
Hello Richard,
You can use CSS code to edit your dropdown menu, color and size to meet your needs for your website. You can create a very simple new dropdown menu with HTML and CSS only. You can also use javascript for the creation of dropdown menu. I have a link for you which could be helpful
http://purecssmenu.com/
You will find help here on creating dropdown menu. I hope this helps.
