Stil på din meny med CSS

För den som har lite kunskaper i HTML och CSS/Stylesheets så går det finfint att applicera stil och design på din meny.

Observera att detta är generella webb- och formgivningskunskaper som ligger utanför Delegias område, och därmed utanför vad vi kan kan erbjuda inom ramen för vår support. Med andra ord. Är du inte säker på detta kan du beställa denna tjänst av oss.  Mycket kan gå fel så prova inte om du inte är 100% säker på vad du gör.

Nedan finns en standardsstil, som går att applicera på menyn som heter MainMenu, för en liggande meny:
 

<style>

(... ev annan kod...)

       #MainMenuUl
        {
            display: inline;
            list-style-type: none;
            padding: 0;
            margin: 0;

        }
        #MainMenuUl li
        {
            padding: 0;
            margin: 0;
            display: inline;
        }

        #MainMenuUl a
        {
            text-align: center;
            float: left;
            vertical-align: middle;
            font: 11px/2;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: normal;
            height: 20px;
            padding: 5px 10px;
            letter-spacing: 1px;
            border-style: solid;
            border-width: 1px;
            border-color: #cccccc;
            background-color: #ffffff;

        }

#MainMenuUl a:hover {
            background-color: #f8f8f8;
            text-decoration: underline;
            border-width: 1px;
            border-color: #cccccc;
}

a#MainMenuActive
{
            color: #000;
            border-width: 1px;
            border-color: #000000;
}

(...ev annan kod...)

 </style>

Under menyn "SubMenu": Kod för en stående meny

Om du vill få en undermeny att se bra ut i en höger- eller vänsterkolumn, väljer du denna grundstil (för egen vidare variation):

       #SubMenuUl
        {
            border-style: solid;
            border-width: 1px 0 1px 0;
            border-color: #8b8b8e;
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

#SubMenuUl li
{

border: 1px solid #000000;
padding: 5px;
height: 22px;
}
#SubMenuUl a
{

color: #5a595a;
font-weight: bold;
text-decoration: none;

}

#SubMenuUl a:hover
{
color: #0000ff;
font-weight: bold;
text-decoration: none;
}

a#SubMenuActive
{
color: #0000ff;
}

(...ev annan kod)

</script>

Under menyn "SubMenu": Kod för en stående meny

Om du vill få en undermeny att se bra ut i en höger- eller vänsterkolumn, väljer du denna grundstil (för egen vidare variation):

<script>

(...annan kod...)

      #SubMenuUl
        {
            width: 100%;
            list-style-type: none;
            padding: 0;
            margin: 0; 

       }

        #SubMenuUl li
        {
            padding: 0;
            margin: 0;
            display: inline;
        }

      #SubMenuUl a
        {
            text-align: center;
            vertical-align: middle;
            font: 11px/2;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: normal;
            height: 20px;
            padding: 5px 10px;
            letter-spacing: 1px;
            border-style: solid;
            border-width: 1px;
            border-color: #cccccc;
            background-color: #ffffff;
            /*display: block;*/
        }

#SubMenuUl a:hover {
            background-color: #f8f8f8;
            text-decoration: underline;
            border-width: 1px;
            border-color: #cccccc;
}

a #SubMenuUlActive
{
            color: #000;
            border-width: 1px;
            border-color: #000000;

(...annan kod...)

</script>