[HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

[Sniper_E]

OK Jaymie, I'm going to install this real quick and check it out.

On the problem you mentioned about making changes and couldn't see any changes after your edits...
Just want to make sure this wasn't the problem.

Did you know?
When you make edits to a template and Refresh Templates in the ACP,
then you go back to the index page... you will see the changes you made.
When you make edits to a stylesheet and Refresh Theme in the ACP,
then you go back to the index page... you will not see the changes you made.
You have to Refresh your web Browser before you can see the changes you made.

Those last two class listed in your stylesheet looks like it may be the hover box.

Code: Select all

#nav li:hover li:hover > a.expand {
   background: #fff;
   color: #115098;
   text-decoration: none;
}

#nav li:hover li:hover > li a.expand {
   background: #fff;
   color: #115098;
   text-decoration: none;
}

Try changing those two and see what happens.

Code: Select all

#nav li:hover li:hover > a.expand {
   background: #CADCEB;
   color: #AA0000;
   text-decoration: underline;
}

#nav li:hover li:hover > li a.expand {
   background: #CADCEB;
   color: #AA0000;
   text-decoration: underline;
}

Refresh Theme / Refresh Browser / What changed?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Just played with this a little. This is your stylesheet modified.

Code: Select all

    /*  phpBB 3.0 Style Sheet - Colours & Backgrounds for common.css
        --------------------------------------------------------------
      Style name:         Glacier
      Based on style:     proSilver (this is the default phpBB 3 style)
      Original author:   subBlue ( http://www.subBlue.com/ )
      Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
     
      Style Author:      Ika ( http://www.shadowflames.us )
      Copyright 2007-2008 ShadowFlames Development
        -------------------------------------------------------------- */

/* NAVIGATION */

#nav {
   padding: 0;
   margin: 0;
   list-style: none;
   z-index: 200;
}

#nav li.top {
   float: left;
}

#nav li.top_r {
   float: right;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link_r,
#nav li a.top_link_r_alert {
   height: 27px;
   line-height: 35px;
   color: #115098;
   text-decoration: none;
   font-size: 1.1em;
   font-weight: bold;
   padding: 0;
   cursor: pointer;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link span.down {
   float: left;
}

#nav li a.top_link_r,
#nav li a.top_link_r_alert,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span,
#nav li a.top_link_r span.down {
   float: right;
}

#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span {
   padding: 0 0px 0 0px;
   text-align: center;
}

#nav li a.top_link span.down,
#nav li a.top_link_r span.down {
   padding: 0 12px 0 12px;
   height: 33px;
   text-align: center;
}

#nav li:hover a.top_link,
#nav a.top_link:hover,
#nav li:hover a.top_link_r,
#nav a.top_link_r:hover {
   color: #AA0000;
   text-decoration: underline;
}

#nav li:hover a.top_link_r_alert,
#nav a.top_link_r_alert:hover,
#nav li:hover a.top_link_alert,
#nav a.top_link_alert:hover {
   color: #115098;
   text-decoration: underline;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down,
#nav li:hover a.top_link_r span.down,
#nav a.top_link_r:hover span.down {
   padding-bottom: 3px;
}

#nav table {
   border-collapse: collapse;
   padding: 0;
   margin: 0;
   position: absolute;
   left: 0;
   top: 0;
}

#nav li:hover {
   position: relative;
   z-index: 200;
}

#nav a:hover {
   position: relative;
   white-space: normal;
   z-index: 200;
}

#nav :hover ul.sub {
   left: 1px;
   top: 30px;
   background-color: #CADCEB;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 190px;
   height: auto;
   z-index: 300;
}

#nav :hover ul.sub li {
   height: 20px;
   position: relative;
   float: left;
   width: 190px;
}

#nav :hover ul.sub li a {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 188px;
   line-height: 18px;
   text-indent: 5px;
   color: #3365B7;
   text-decoration: none;
}

#nav :hover ul.sub li a:hover {
   color: #AA0000;
   background: none;
   text-decoration: underline;
}

#nav :hover ul.sub li a.expand:hover {
   color: #AA0000;
   background-color: #CADCEB;
   text-decoration: underline;
}

#nav li b {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 188px;
   line-height: 14px;
   margin-bottom: 1px;
   text-indent: 6px;
   color: #3365B7;
   border-bottom: 1px solid #3366FF;
   cursor: default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left: 59px;
   top: -4px;
   padding: 3px;
   border: 1px solid #000;
   white-space: nowrap;
   width: 188px;
   z-index: 400;
   height: auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > ul {
   left: 123px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #CADCEB;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 125px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > a.expand {
   background: none;
   color: #AA0000;
   text-decoration: underline;
}

#nav li:hover li:hover > li a.expand {
   background: none;
   color: #AA0000;
   text-decoration: underline;
}

[Jaymie1989]

Thanks Ed,

With the mouse over the links, I was then red and underlined, I noticed that when you go onto the sub menu the text on the menu turns from blue to red and underlined. I would like it red on mouse over.
Also I would like the same on the sub menu to be red and underlined on mouse over.

Its this text that I want to be the dark blue color like the board index color as standard on prosilver.

Also when I try to add a • after the UCP and before the Board Index on their it shows the • above the board index rather than next to it, Also with trying to add a icon next to it like FAQ it doesnt show.

This is how I have got my HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
   <!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
   phpBB style name: prosilver
   Based on style:   prosilver (this is the default phpBB3 style)
   Original author:  Tom Beddard ( http://www.subBlue.com/ )
   Modified by:

   NOTE: This page was generated by phpBB, the free open-source bulletin board package.
         The phpBB Group is not responsible for the content of this page and forum. For more information
         about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
   var jump_page = '{LA_JUMP_PAGE}:';
   var on_page = '{ON_PAGE}';
   var per_page = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';
   var style_cookie = 'phpBBstyle';
   var style_cookie_settings = '{A_COOKIE_SETTINGS}';
   var onload_functions = new Array();
   var onunload_functions = new Array();

   <!-- IF S_USER_PM_POPUP -->
      if ({S_NEW_PM})
      {
         var url = '{UA_POPUP_PM}';
         window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
      }
   <!-- ENDIF -->

   /**
   * Find a member
   */
   function find_username(url)
   {
      popup(url, 760, 570, '_usersearch');
      return false;
   }

   /**
   * New function for handling multiple calls to window.onload and window.unload by pentapenguin
   */
   window.onload = function()
   {
      for (var i = 0; i < onload_functions.length; i++)
      {
         eval(onload_functions[i]);
      }
   }

   window.onunload = function()
   {
      for (var i = 0; i < onunload_functions.length; i++)
      {
         eval(onunload_functions[i]);
      }
   }

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
   <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   <div id="page-header">
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
         </div>

      <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

         <span class="corners-bottom"><span></span></span></div>
      </div>


   <!-- IF .redbar -->
      <div class="redbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="red-bar">
           <div style="text-align:center;">
            <!-- BEGIN redbar --><a href="{redbar.U_REDBAR_URL}" {redbar.REDBAR_COLOUR} title="{redbar.REDBAR_NAME}">{redbar.REDBAR_NAME}</a><!-- IF redbar.S_LAST_ROW -->&nbsp;<!-- ELSE --> &nbsp; <strong>&#8249;</strong> &nbsp; <!-- ENDIF --><!-- END redbar -->
           </div>   
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>     
   <!-- ENDIF -->
      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">
            <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
            
            <li class="rightside">
            <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <form action="{U_SEARCH}" method="post" id="search">
            <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" class="button2" value="{L_SEARCH}" type="submit" />
            </form>
            <!-- ENDIF -->
            <a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
         </ul>

         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="linklist navlinkstwo">
            <li class="icon-ucp">
               <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
                  <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
               <!-- IF S_DISPLAY_SEARCH --> &bull;
               <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
               <!-- ENDIF -->
               <!-- IF U_RESTORE_PERMISSIONS --> &bull;
               <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
               <!-- ENDIF -->
            </li>
         </ul>
         <!-- ENDIF -->

         <ul class="linklist rightside">
            <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
               <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
            <!-- ENDIF -->
         </ul>
         
         <span class="hovereffect2"></span>

    <ul id="nav">
      <!-- IF S_USER_LOGGED_IN -->
        <li class="top" class="icon-faq"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span></a>
      <!-- ENDIF -->
            <ul class="sub">
                <li><b>Users</b></li>
                <li><a href="{U_PROFILE}" class="expand">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                            <li><a href="{U_PROFILE}">Overview</a></li>
                            <li><a href="{U_PROFILE}?i=profile">Profile</a></li>
                            <li><a href="{U_PROFILE}?i=prefs">Board Preferences</a></li>
                            <li><a href="{U_PRIVATEMSGS}">Private Messages</a></li>
                            <li><a href="{U_PROFILE}?i=groups">User Groups</a></li>
                            <li><a href="{U_PROFILE}?i=zebra">Friends &amp; Foes</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <!-- IF U_MCP -->
                <li><b>Moderators</b></li>
                <li><a href="{U_MCP}">{L_MCP}</a></li>
                <!-- ENDIF -->
                <!-- IF U_ACP -->
                <li><b>Administrators</b></li>
                <li><a href="{U_ACP}">{L_ACP}</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
            &bull; <li class="top"><a href="{U_INDEX}" class="top_link"><span>{L_INDEX}</span></a></li>
    </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>

   </div>

   <a name="start_here"></a>
   <div id="page-body">
      <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
      <div id="information" class="rules">
         <div class="inner"><span class="corners-top"><span></span></span>
            <strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- ENDIF -->


I do know about refreshing my template and theme's cache as well.

[Sniper_E]

Jamie, that modified stylesheet of yours that I posted above does change the sublinks on mouseover.
Your image there does not show the changes. Use that stylesheet, replace yours with it.

Code: Select all

        <li class="top" class="icon-faq"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span></a> &bull;

[Jaymie1989]

Thanks, I've tweaked a few things for me

Where the text says Users, Moderators and Administrators under the User Control Panel menu, Which line is it to edit the color?

[Sniper_E]

That color text is in this class:

Code: Select all

#nav li b {
   color: #3365B7;
}

Change that to the color you want.

I've played around with the positions and borders of those dropdown boxes, blending them in with the menu bar.
I have it positioned as if it extends off of the menu bar.
You could even go as far with what I have... by removing the borders and rounding off those bottom corners.

Check it out...

drop_menu.gif

(11.04 KiB) Not downloaded yet

You have to play around with them and change something and look to see what it controls.
Playing with it the lower classes cotrol the second dropdown box and the classes in the middle control the first box.
You have to play with those codes and learn which class does what.

In my template I got the background color by changing this:

Code: Select all

<li><b>Users</b></li>

To this:

Code: Select all

<li style="background: #109DE4;"><b>Users</b></li>

We could add a class in the stylesheet for this. That would be the correct way to handle this.

Then I made my text white in the stylesheet like this:

Code: Select all

#nav li b {
   color: #FFF;
}

My stylesheet has now changed to this if it helps:

Code: Select all

    /*  phpBB 3.0 Style Sheet - Colours & Backgrounds for common.css
        --------------------------------------------------------------
      Style name:         Glacier
      Based on style:     proSilver (this is the default phpBB 3 style)
      Original author:   subBlue ( http://www.subBlue.com/ )
      Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
     
      Style Author:      Ika ( http://www.shadowflames.us )
      Copyright 2007-2008 ShadowFlames Development
        -------------------------------------------------------------- */

/* NAVIGATION */

#nav {
   padding: 0;
   margin: 0;
   list-style: none;
   z-index: 200;
}

#nav li.top {
   float: left;
}

#nav li.top_r {
   float: right;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link_r,
#nav li a.top_link_r_alert {
   height: 27px;
   line-height: 35px;
   text-decoration: none;
   font-size: 1.1em;
   font-weight: bold;
   padding: 0;
   cursor: pointer;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link span.down {
   float: left;
}

#nav li a.top_link_r,
#nav li a.top_link_r_alert,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span,
#nav li a.top_link_r span.down {
   float: right;
}

#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span {
   padding: 0 0px 0 0px;
   text-align: center;
}

#nav li a.top_link span.down,
#nav li a.top_link_r span.down {
   padding: 0 12px 0 12px;
   height: 33px;
   text-align: center;
}

#nav li:hover a.top_link,
#nav a.top_link:hover,
#nav li:hover a.top_link_r,
#nav a.top_link_r:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover a.top_link_r_alert,
#nav a.top_link_r_alert:hover,
#nav li:hover a.top_link_alert,
#nav a.top_link_alert:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down,
#nav li:hover a.top_link_r span.down,
#nav a.top_link_r:hover span.down {
   padding-bottom: 3px;
}

#nav table {
   border-collapse: collapse;
   padding: 0;
   margin: 0;
   position: absolute;
   left: 0;
   top: 0;
}

#nav li:hover {
   position: relative;
   z-index: 200;
}

#nav a:hover {
   position: relative;
   white-space: normal;
   z-index: 200;
}

#nav :hover ul.sub {
   left: 1px;
   top: 32px;
   background-color: #cadceb;
   padding: 3px;
   -webkit-border-bottom-left-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   white-space: nowrap;
   width: 178px;
   height: auto;
   z-index: 300;
}

#nav :hover ul.sub li {
   height: 20px;
   position: relative;
   float: left;
   width: 178px;
}

#nav :hover ul.sub li a {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 178px;
   line-height: 18px;
   text-indent: 5px;
   color: #3365B7;
   text-decoration: none;
}

#nav :hover ul.sub li a:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav :hover ul.sub li a.expand:hover {
   color: #D31141;
   background-color: #cadceb;
   text-decoration: underline;
}

#nav li.title {
   background: #109DE4;
}

#nav li b {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 178px;
   line-height: 14px;
   margin-bottom: 1px;
   padding-top: 2px;
   text-indent: 6px;
   color: #FFF;
   cursor: default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left: 45px;
   top: -5px;
   padding: 3px;
   border: 1px solid #000;
   white-space: nowrap;
   width: 125px;
   z-index: 400;
   height: auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > ul {
   left: 175px; /* distance from right margin of main drop */
   top: -23px;
   background-color: #cadceb;
   padding: 3px;
   -webkit-border-bottom-left-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   white-space: nowrap;
   width: 125px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > a.expand {
   background: none;
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover li:hover > li a.expand {
   background: none;
   color: #D31141;
   text-decoration: underline;
}

[Jaymie1989]

Great work Ed,

Its really what I want.

I do want to replace the current UCP link with this drop down one.

I just have the issue of how to add the icon next to the text and the • not showing in the right place.
Any ideas?

Apart from them two things, its perfect

In relation to this:
http://www.youtube.com/watch?v=BBx60qgYYI0

[Sniper_E]

Jamie, I did show you how you could add that •

Code: Select all

        <li class="top icon-faq"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span></a> &bull;

I just have the issue of how to add the icon next to the text and the • not showing in the right place.
Any ideas?

Did that line above work with the class="top icon-faq" in it. See if that takes care of the icon missing.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Updated

I took the borders out of the dropdowns and rounded the bottom corners for this menu in prosilver.
This is my updated pro_dropdown_6.css for prosilver

Code: Select all

    /*  phpBB 3.0 Style Sheet - Colours & Backgrounds for common.css
        --------------------------------------------------------------
      Style name:         Glacier
      Based on style:     proSilver (this is the default phpBB 3 style)
      Original author:   subBlue ( http://www.subBlue.com/ )
      Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
     
      Style Author:      Ika ( http://www.shadowflames.us )
      Copyright 2007-2008 ShadowFlames Development
        -------------------------------------------------------------- */

/* NAVIGATION */

#nav {
   padding: 0;
   margin: 0;
   list-style: none;
   z-index: 200;
}

#nav li.top {
   float: left;
}

#nav li.top_r {
   float: right;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link_r,
#nav li a.top_link_r_alert {
   height: 27px;
   line-height: 35px;
   text-decoration: none;
   font-size: 1.1em;
   font-weight: bold;
   padding: 0;
   cursor: pointer;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link span.down {
   float: left;
}

#nav li a.top_link_r,
#nav li a.top_link_r_alert,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span,
#nav li a.top_link_r span.down {
   float: right;
}

#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span {
   padding: 0 0px 0 0px;
   text-align: center;
}

#nav li a.top_link span.down,
#nav li a.top_link_r span.down {
   padding: 0 12px 0 12px;
   height: 33px;
   text-align: center;
}

#nav li:hover a.top_link,
#nav a.top_link:hover,
#nav li:hover a.top_link_r,
#nav a.top_link_r:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover a.top_link_r_alert,
#nav a.top_link_r_alert:hover,
#nav li:hover a.top_link_alert,
#nav a.top_link_alert:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down,
#nav li:hover a.top_link_r span.down,
#nav a.top_link_r:hover span.down {
   padding-bottom: 3px;
}

#nav table {
   border-collapse: collapse;
   padding: 0;
   margin: 0;
   position: absolute;
   left: 0;
   top: 0;
}

#nav li:hover {
   position: relative;
   z-index: 200;
}

#nav a:hover {
   position: relative;
   white-space: normal;
   z-index: 200;
}

#nav :hover ul.sub {
   left: 1px;
   top: 32px;
   background-color: #cadceb;
   padding: 3px;
   -webkit-border-bottom-left-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   white-space: nowrap;
   width: 178px;
   height: auto;
   z-index: 300;
}

#nav :hover ul.sub li {
   height: 20px;
   position: relative;
   float: left;
   width: 178px;
}

#nav :hover ul.sub li a {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 178px;
   line-height: 18px;
   text-indent: 5px;
   color: #3365B7;
   text-decoration: none;
}

#nav :hover ul.sub li a:hover {
   color: #D31141;
   text-decoration: underline;
}

#nav :hover ul.sub li a.expand:hover {
   color: #D31141;
   background-color: #cadceb;
   text-decoration: underline;
}

#nav li.title {
   background: #109DE4;
}

#nav li b {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 178px;
   line-height: 14px;
   margin-bottom: 1px;
   padding-top: 2px;
   text-indent: 6px;
   color: #FFF;
   cursor: default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left: 45px;
   top: -5px;
   padding: 3px;
   border: 1px solid #000;
   white-space: nowrap;
   width: 125px;
   z-index: 400;
   height: auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > ul {
   left: 175px; /* distance from right margin of main drop */
   top: -23px;
   background-color: #cadceb;
   padding: 3px;
   -webkit-border-bottom-left-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   white-space: nowrap;
   width: 125px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li:hover li:hover > a.expand {
   background: none;
   color: #D31141;
   text-decoration: underline;
}

#nav li:hover li:hover > li a.expand {
   background: none;
   color: #D31141;
   text-decoration: underline;
}

And I edited the overall_header.html codes and changed codes like this...

Code: Select all

            <li><b>User</b></li>

To this...

Code: Select all

            <li class="title"><b>User</b></li>

This class was added to that stylesheet to cover this...

Code: Select all

#nav li.title {
   background: #109DE4;
}

[Jaymie1989]

I love the corners. I have altered mine as I wanted the sub drop down further down from the navigation bar, How can I corner the top right of it. As far as I am concerned the CSS is now done (Almost)

The only problems are when adding the • and the icon.

Here is my HTML

Code: Select all

<ul id="nav">
      <!-- IF S_USER_LOGGED_IN -->
        <li class="top icon-faq"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span></a> &bull;
      <!-- ENDIF -->
            <ul class="sub">
                <li class="title"><b>User</b></li>
                <li><a href="{U_PROFILE}" class="expand">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                            <li><a href="{U_PROFILE}">Overview</a></li>
                            <li><a href="{U_PROFILE}?i=profile">Profile</a></li>
                            <li><a href="{U_PROFILE}?i=prefs">Board Preferences</a></li>
                            <li><a href="{U_PRIVATEMSGS}">Private Messages</a></li>
                            <li><a href="{U_PROFILE}?i=groups">User Groups</a></li>
                            <li><a href="{U_PROFILE}?i=zebra">Friends &amp; Foes</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <!-- IF U_MCP -->
                <li class="title"><b>Moderators</b></li>
                <li><a href="{U_MCP}">{L_MCP}</a></li>
                <!-- ENDIF -->
                <!-- IF U_ACP -->
                <li class="title"><b>Administrators</b></li>
                <li><a href="{U_ACP}">{L_ACP}</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
         <li class="top"><a href="{U_INDEX}" class="top_link"><span>{L_INDEX}</span></a></li>
    </ul>

Here is how it looks:

nav.jpg

(12.24 KiB) Not downloaded yet

[Sniper_E]

I think this is all you need to round all the corners.

Code: Select all

   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;

Putting icons and • in these links is very touchy. I'm not sure about that.
I couldn't get it to line up like I wanted. They throw everything off.
If you are doing icons, drop the •... you don't need • when icons are present.

[Jaymie1989]

Thanks Ed,

I want to replace the UCP link with this drop down one, So I need to find a way to have the image next to it so it looks right and not disproportionate