Question

I’m re-developing a website and I’d like to have simple links in the menu, so that the user can open them in new tabs, a menu item looks like this at the moment:

<li class='menu-left-row' id='messages' onclick=\"javascript:showscreen_load('messages.php?sel=overview','messages','menu-left')\">
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    Messages
    </div>
</li>

now what i set up a function that intersepts all links with the class ‘toggle_reconstruct’ and so i’d like to have it rather something like this:

<li class='menu-left-row' id='messages'>
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    <a class='toggle_reconstruct' href='/messages/'>Messages</a>
    </div>
</li>

but now the link is styling the text of the menu item, in this case “messages” becomes bold and blue. there will be lots of other menu items with a lot of different styles, is there any way to prevent the link from styling its content?

UPDATE:
someone just pointed me to use:

a:link {font-weight:inherit; color:inherit;text-decoration:none;} 

would this be a valid option?

Answer 1

You can either move the div outside of the a tag or apply a class to it and give it a custom style (overriding the style given by the link). So in this case, you might want to add some CSS to the menu-left-item class so it looks like however you want.