Python selenium to show pull down list and select

Question

I want to show pull down lost and select option, then click radio button and submit it, I used code as below:

browser = webdriver.PhantomJS()
browser.get(page)
browser.find_element_by_class_name("link-disable").click()
browser.find_element_by_class_name("orientation-button").click()
browser.find_element_by_id("orientation_portrait").click()
browser.find_element_by_name("commit").submit()

I got error as below, what can I do, I tried a lot of time, but I can get what I need, can you help me? it seems like the element is invisible, but I can do it on browser, I am not sure why...

browser.find_element_by_class_name("orientation-button").click()
self._execute(Command.CLICK_ELEMENT)
return self._parent.execute(command, params)
self.error_handler.check_response(response)
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotVisibleException: Message: {"errorMessage":"Element is not currently visible and may not be manipulated"...}

Here is HTML source:

....
<div class="pull-right setting-dropdown">
    <ul>
        <li>
            <a class="link-disable" href="#"><i class="fa fa-cog" aria-hidden="true"></i>Setting</a>
            <ul class="setting-dropdown-area">
                <li><a class="orientation-button" href="#"><i class="fa fa-repeat" aria-hidden="true"></i>Orientation</a></li>
                <li><a href="/account/logout"><i class="fa fa-sign-out" aria-hidden="true"></i>Logout</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="modal fade orientation-modal" tabindex="-1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="modal-label">Change Orientation</h4>
    </div>
    <div class="modal-body">Select Up side
        <form class="img-orientation-form" action="/account/orientation" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="?"><input type="hidden">
            <div class="img-orientation-img-wrapper">
                <input type="radio" name="orientation" id="orientation_landscape_right" value="landscape_right" class="img-orientation-radio landscape-right" checked="checked"><span>(default)</span>
                <input type="radio" name="orientation" id="orientation_upside_down" value="upside_down" class="img-orientation-radio upside-down">
                <input type="radio" name="orientation" id="orientation_landscape_left" value="landscape_left" class="img-orientation-radio landscape-left">
                <input type="radio" name="orientation" id="orientation_portrait" value="portrait" class="img-orientation-radio portrait">
                <img class="img-orientation-img" src="/assets/smartphone_landscape-c18815043a8d53e15936a072df803a16ec7fd611a243ff907576d941ff918a74.png" alt="Smartphone landscape">
            </div>
            <input type="hidden" name="img_orientation[controller]" id="img_orientation_controller" value="photos/seconds">
            <input type="hidden" name="img_orientation[action]" id="img_orientation_action" value="index">
            <input type="hidden" name="img_orientation[datetime]" id="img_orientation_datetime" value="2017/02/20 10:04:00">
            <div class="modal-control">
                <input type="submit" name="commit" value="update" class="btn btn-primary" data-disable-with="Set">
            </div>
        </form>
    </div>
</div>
....